<template>
	<rootWithStateBarLayout :rightToolBarData="toolDataList" @onToolItemClick="onToolItemClick"
		:rightToolBarBgColor="toolBarBgColor">

		<view slot="pageContent" class="content-lay flex-v">
			<view class="header flex-h">
				<view class="flex-h" style="align-items: center">
					<image @click="navigateBack" class="back-image" src="/static/imgs/tools/icon_nav_back_dark@2x.png">
					</image>

					<view class="header-name-lay flex-h">
						<text class="header-name">{{$t("visualShow.macTypeStr")}}：</text>
						<text
							class="header-value header-value-oth">{{selectTableData ? selectTableData.mac_numb : '--'}}</text>
					</view>

					<view class="header-name-lay flex-h">
						<text class="header-name">{{$t("visualShow.progressStatus")}}：</text>
						<text class="header-value header-value-oth fs-ot">{{
							headerNo
						  }}</text>
					</view>
				</view>
				<image @click="onResetViewClick" style="width: 32rpx; height: 32rpx;"
					src="/static/imgs/tools/icon_menu_initial_state@2x.png"></image>
			</view>
			<view class="work-lay flex-h">
				<view class="left-info-lay">
					<drawInfoView v-if="showState == 'table'" :infoData="infoTableData" :valueData="selectTableData"
						:planImplementationData="planImplementationData" />
					<photoListView ref="photoListView" v-if="showState != 'table'" class="photo-list"
						:photoList="takePhotoPaths" />
				</view>

				<view class="right-content-lay">
					<drawingBasicFun ref="drawingBasicFun" class="draw-content" :svgOption="svgOption" :needScreenShot="false"
						@onDrawShotFinish="onDrawShotFinish" style="height: 100%" :svgMarkupFileUrl="svgMarkupFileUrl"
						:canEditSelectMarkup="false" />
				</view>
			</view>
		</view>

		<view slot="popupContent">
<!-- 			<hqs-popup title="弹窗标题" v-model="inspectResultRecDialog" from="right" width="60vw">
				<inspectResultRecView @closePopup="closeInspectResultRecView"></inspectResultRecView>
			</hqs-popup> -->

			<hqs-popup title="弹窗标题" v-model="showLogPopup" from="right" width="60vw" class="hqs-popup">
				<reportView @closePopup="closelogView"></reportView>
			</hqs-popup>

			<!-- <hqs-popup title="弹窗标题" v-model="showLogPopup1" from="right" width="464upx" class="hqs-popup">
				<reportViewFile @closePopup="closelogView" @confirmFile="confirmFile"></reportViewFile>
			</hqs-popup>
			<view class="hqs-popup-rename" v-if="renameDialog">
				<view class="content">
					<view class="info-line">
						<view class="info-item">
							<view class="info-title">書類表題：</view>
							<view class="info-value">報告書2</view>
						</view>
						<input class="input" type="text" />
					</view>
					<view class="info-line">
						<view class="info-item">
							<view class="info-title">ファイル名：</view>
							<view class="info-value">第2回A-MISユーザの集い_配管100</view>
						</view>
						<input class="input" type="text" />
					</view>
				</view>
				<view class="footer">
					<view class="btn cancel-btn" @click="cancel">Cancel</view>
					<view class="btn confirm-btn" @click="confirm">OK</view>
				</view>
			</view> -->
		</view>

	</rootWithStateBarLayout>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from "vuex";
	import selectData from "@/common/visual_show_data.js";
	import drawingBasicFun from "@/_components/drawing/drawingBasicFun.vue";
	import pageRightToolBar from "@/_components/pageRightToolBar.vue";
	import drawInfoView from "./_components/drawInfoView.vue";
	import checkInfoView from "./_components/checkInfoView.vue";
	import checkInfoTableView from "./_components/checkInfoTableView.vue";
	import inspectResultRecView from "./_components/wildAccountView.vue";
	import reportView from "./_components/reportView.vue";
	import reportViewFile from "./_components/reportViewFile.vue";
	import photoListView from "./_components/photoListView.vue";

	import hqsPopup from "@/components/hqs-popup/hqs-popup";

	import rootWithStateBarLayout from "@/_components/rootWithStateBarLayout.vue";

	import {
		requireWrkClsDataByCode
	} from "@/localService/wrkClsService.js";

	import {
		requireVisualImplementationData
	} from "@/localService/visualService.js";

	import {
		genLocalDrawPath
	} from "@/localService/index.js";

	import {
		getMarkupFilePathEntry,
		saveMarkupFile
	} from "@/localService/markupFileService.js";

	import {
		requireVisualPhotoByMacnumbAndPosno,
		addVisualPhotoByMacnumbAndPosno
	} from "@/localService/visualPhotoService.js";

	import {
		getFileName
	} from "@/utils/fileUtil.js";

	export default {
		computed: {
			...mapState(["userInfo", "selectInfo"]),
		},

		components: {
			pageRightToolBar,
			drawingBasicFun,
			drawInfoView,
			checkInfoView,
			checkInfoTableView,
			hqsPopup,
			inspectResultRecView,
			reportView,
			reportViewFile,
			photoListView,

			rootWithStateBarLayout,
		},

		onReady() {
			console.log("visualShow --- onReady")
			let _self = this;
			this.selectTableData = getApp().globalData.selectListItemData;
			this.requireWrkClsDataByCodeApi(this.selectTableData.wrk_cls_code);
			this.requireVisualImplementationDataApi(this.selectTableData.mac_type);

			/**
			 * 获取图纸本地地址
			 */
			genLocalDrawPath(this.selectTableData.drw_pass, this.selectTableData.plt_path).then(e => {
				this.$nextTick(function() {
					_self.svgOption.svgSourcePath = e;
					_self.svgOption.svgSourceUrl = e;
					_self.requireGetMarkupFilePathEntry();
					// _self.saveMarkupFileApi();

				})
			});
		},

		onShow() {
			console.log("visualShow --- onShow");
			this.selectTableData = getApp().globalData.selectListItemData;
			this.requireGetMarkupFilePathEntry();
			this.requireVisualPhotoByMacnumbAndPosnoApi(this.selectTableData.dmg_code,
				this.selectTableData.mac_type);
		},

		onHide() {
			this.svgMarkupFileUrl = '';
		},

		data() {
			return {
				/**
				 * 前个页面选中的列表项
				 */
				selectTableData: {},

				/**
				 * 图纸地址
				 */
				svgOption: {
					svgSourcePath: "",
					svgSourceUrl: "",
				},
				svgMarkupFileUrl: '',

				toolDataList: selectData.toolEntry,

				toolBarBgColor: "#00C200",

				headerName: "100-001A(P)",
				headerNo: "作业完了",
				workLayHeight: 0,
				workLayWidth: 0,

				showState: "table", // photo

				infoTableData: selectData.tableInfoData,
				tableSelectData: {},

				checkHeight: 0,

				showLogPopup: false,
				showLogPopup1: false,

				takePhotoPaths: [],
				renameDialog: false,
				inspectResultRecDialog: false,

				// 左边检查进度图表
				planImplementationData: [],

				drawShotPath: '', // svg截图
			};
		},

		methods: {
			requireGetMarkupFilePathEntry() {
				console.log("requireGetMarkupFilePathEntry   ---   ");
				let dateStr = (new Date()).Format("yyyyMMdd");
				console.log("requireGetMarkupFilePathEntry   ---   " + dateStr);

				let fileName = getFileName(this.selectTableData.drw_pass);
				let _self = this;
				getMarkupFilePathEntry(this.selectTableData.plt_path, fileName, /*"20210805"*/ dateStr).then(e => {
					console.log("requireGetMarkupFilePathEntry   --- re  ")
					console.log(e)
					_self.svgMarkupFileUrl = e;
				});
			},


			saveMarkupFileApi() {
				console.log("saveMarkupFileApi   ---   ");
				let dateStr = (new Date()).Format("yyyyMMdd");
				console.log("saveMarkupFileApi   ---   " + dateStr);

				let fileName = getFileName(this.selectTableData.drw_pass);
				let _self = this;
				saveMarkupFile(this.selectTableData.plt_path, fileName, /*"20210805"*/ dateStr, "test cnotent").then(e => {
					console.log("saveMarkupFileApi   --- re  ")
					console.log(e)

					// _self.svgMarkupFileUrl = e;
				});
			},

			requireWrkClsDataByCodeApi(inCode) {
				let _self = this;
				requireWrkClsDataByCode(inCode).then(e => {
					if (e.length > 0)
						_self.selectTableData.wrkClsStr = e[0].cod_name;
					_self.selectTableData = JSON.parse(JSON.stringify(_self.selectTableData))
				})
			},

			/**
			 * 查询计划状态
			 * @param {Object} inStateArray
			 */
			requireVisualImplementationDataApi(inMacType) {
				requireVisualImplementationData(inMacType).then(e => {
					this.planImplementationData = e;
				})
			},


			// requireVisualPhotoByMacnumbAndPosno,
			// addVisualPhotoByMacnumbAndPosno
			/**
			 * 查询检查点的照片和备注
			 * @param {Object} inMacNumb
			 * @param {Object} inPosNo
			 */
			requireVisualPhotoByMacnumbAndPosnoApi(inDmgCode, inMacType) {
				requireVisualPhotoByMacnumbAndPosno(inDmgCode, inMacType).then(e => {
					console.log("requireVisualPhotoByMacnumbAndPosnoApi   ---   re")
					console.log(e)
					this.takePhotoPaths = e;
				})
			},

			addVisualPhotoByMacnumbAndPosnoApi(inPath) {
				let _self = this;
				let maxOrder = 0;
				if(this.takePhotoPaths.length > 0)
					maxOrder = Math.max.apply(Math,this.takePhotoPaths.map(item => { return item.photo_ordr }))
				console.log("addVisualPhotoByMacnumbAndPosnoApi maxOrder = " + maxOrder )
				addVisualPhotoByMacnumbAndPosno({
					dmg_code: _self.selectTableData.dmg_code,
					ssn_date: (new Date()).Format("yyyyMMdd"),
					photo_no: maxOrder + 1,
					photo_ordr: maxOrder + 1,
					photo_path: inPath,
					photo_note: "default memo",
					not_print: 0,
					io_flg: 0,
					plt_code: _self.selectTableData.plt_code,
					mac_type: _self.selectTableData.mac_type,
				}).then(e => {
					console.log("addVisualPhotoByMacnumbAndPosnoApi --------==========--------")
					_self.requireVisualPhotoByMacnumbAndPosnoApi(_self.selectTableData.dmg_code,
						_self.selectTableData.mac_type);
				})
			},

			onToolItemClick(e) {
				if (e == "detail") {
					// 野账
					// this.inspectResultRecDialog = true;
					
					// 记录
					this.showLogPopup = true;
					
					// this.showLogPopup1 = true
					
					// this.renameDialog = true;
					
				} else if (e == "dataentry") {
					this.showLogPopup = true;
				} else if (e == "camera") {
					this.showCameraPage();
				} else if (e == "takephoto") {
					this.takePhoto();
				} else if (e == "editphoto") {
					this.editPhoto();
				} else if (e == "switch") {
					this.switchTableShow();
				} else if (e == "edit") {
					uni.navigateTo({
						url: "/pages/visual/drawAddMarkup"
					})
				}
			},

			showCameraPage() {
				if (this.showState == "table") {
					this.showState = "photo";
					this.toolDataList = selectData.photoToolEntry;
				} else {
					this.showState = "table";
					this.toolDataList = selectData.toolEntry;
				}
			},

			closeInspectResultRecView() {
				this.inspectResultRecDialog = false;
			},

			closelogView() {
				this.showLogPopup = false;
			},

			takePhoto() {
				let _self = this;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ["camera", "album"], //从相册选择
					success: function(res) {
						res.tempFilePaths.forEach((e) => {
							console.log(e)
							uni.saveFile({
								tempFilePath: e,
								success: function(saveres) {
									_self.addVisualPhotoByMacnumbAndPosnoApi(saveres.savedFilePath);
								}
							});
						});
					},
				});
			},

			editPhoto() {
				console.log("editPhoto")
				let tempIndex = this.$refs.photoListView.getSelectImage().index;
				console.log(tempIndex)
				uni.navigateTo({
					url: "/pages/visual/editPhotos?dataList=" +
						JSON.stringify(this.takePhotoPaths) +
						"&currentIndex=" + tempIndex,
				});
			},
			
			onResetViewClick() {
				this.$refs.drawingBasicFun.resetDrawView();
			},
			
			openReportDialog() {
				this.showLogPopup = true;
			},
			onDrawCloseClick() {
				this.showDrawLay = false;
			},
			switchTableShow() {},
			navigateBack() {
				uni.navigateBack();
			},
			renameConfirm() {
				this.renameDialog = true;
			},
			cancel() {
				this.renameDialog = false
			},
			confirm() {
				this.renameDialog = false
			},
			confirmFile() {
				this.inspectResultRecDialog = true
			},

			/**
			 * 图纸截图完成后 返回截图path
			 * @param {Object} e
			 */
			onDrawShotFinish(e) {
				this.drawShotPath = e;
			},
		},
	};
</script>

<style scoped lang="scss">
	.content-lay {
		// background: #fff;
		width: 100%;
	}

	.hqs-popup {
		// height: calc(100vh - var(--status-bar-height));
		height: calc(100vh - 30px);
	}

	.tool-lay {
		box-sizing: border-box;
		width: 47upx;
		height: calc(100vh - var(--status-bar-height));
		padding: 16upx 6upx;
	}

	.header {
		background-color: #fff;
		box-sizing: border-box;
		padding: 6rpx;
		padding-right: 12rpx;
		align-items: center;
		justify-content: space-between;

		.back-image {
			width: 22rpx;
			height: 22rpx;
		}

		.header-name-lay {
			align-items: center;
			margin-right: 9rpx;

			.header-name {
				margin-left: 6rpx;
				font-size: 14rpx;
				color: #1f2329;
				font-weight: 400;
			}

			.header-value {
				background: #fdfacc;
				border-radius: 1rpx;
				border: 1px solid #cfd3d5;
				padding: 8rpx 12rpx;
				font-weight: 400;
				font-size: 14rpx;
				color: #333333;
			}

			.header-value-oth {
				width: 168upx;
			}

			.fs-ot {
				font-weight: 500;
				color: #231df7;
			}
		}
	}

	.work-lay {
		box-sizing: border-box;
		justify-content: space-between;
		width: 100%;
		height: 100%;
		align-items: center;
		padding: 12rpx;

		.left-info-lay {
			width: 20%;
			// width: 155upx;
			height: 100%;
			background-color: #ffffff;
			box-sizing: border-box;
			padding: 12rpx;
		}

		.right-content-lay {
			box-sizing: border-box;
			width: 80%;
			height: 100%;
			padding-left: 12rpx;
			background-color: #F6F6F6;
		}
	}

	.hqs-popup-rename {
		width: 464upx;
		height: 194upx;
		background: #ffffff;
		box-shadow: 0px 1upx 18upx 0px rgba(0, 0, 0, 0.16);
		border-radius: 3upx;
		position: fixed;
		z-index: 10001;
		left: 50%;
		margin-left: -232upx;
		top: 50%;
		margin-top: -97upx;
		transition: all 0.4s;

		.footer {
			position: absolute;
			bottom: 0;
			border-top: 1.5upx solid rgba(0, 0, 0, 0.1);
			display: flex;
			width: 100%;

			.btn {
				width: 50%;
				text-align: center;
				font-size: 13upx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #000000;
				line-height: 34upx;

			}

			.confirm-btn {
				border-left: 1.5upx solid rgba(0, 0, 0, 0.1);
				color: #0062B0;
			}
		}

		.content {
			box-sizing: border-box;
			padding: 25upx 13upx 0 13upx;
		}

		.info-line {
			margin-bottom: 13upx;

			.input {
				width: calc(100% - 66upx); //384upx;
				height: 25upx;
				background: #ffffff;
				border-radius: 1upx;
				border: 1upx solid #cfd3d5;
				margin-left: 66upx;
				margin-top: 9upx;
				box-sizing: border-box;
				padding: 0 9upx;
				font-size: 11upx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
			}
		}

		.info-item {
			display: flex;

			.info-title {
				font-size: 11upx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #1f2329;
				width: 66upx;
			}

			.info-value {
				font-size: 11upx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
			}
		}
	}

	/deep/ .qs-con {
		border-radius: 0 !important;
	}
</style>
